<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="aa" uri="/WEB-INF/tld/ajaxanywhere.tld"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="app"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jsp</title>
<script src="/webjars/jquery/3.5.1/jquery.js"></script>
<script src="/aa.js"></script>
<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="/resources/css/dashboard.css" />
</head>
<body>
	<h1>${msg}</h1>
	<br />
	<form id="from1" action="/j/list">
	<div class="container">
		<div class="mb-3">
			<label  class="form-label">ID</label> 
			 <input type="text" class="form-control"  name="id" id="id">
		</div>
		<div class="mb-3">
			<label  class="form-label">NAME</label> 
			 <input type="text" class="form-control"  name="name"  id="name">
		</div>
		<button type="button" id="btSave" class="btn btn-success">保存</button>
	</div>
	</form>
	
	
	<button type="button" id="btQuery" class="btn btn-primary">查询列表</button>
	<button type="button" id="btDelete" class="btn btn-warning">删除</button>
	<button type="button" id="btSaveBatch" class="btn btn-info">批量保存</button>
	<button type="button" id="btSaveDto" class="btn btn-info">复杂保存</button>
	
	<aa:zone name="zoneJ">
		<ul>
			<c:forEach var="o" items="${page.list}" varStatus="s">
			 	<li class="li_list"    id="${o.id}" data-id="${o.id}" data-name="${o.name}" data-addr="${o.id}">
			 	<input type="checkbox" class="ck_id"       id="id_${o.id}"   value='${o.id}' />
			    <input type="hidden"   class="input_name"  id="name_${o.id}" value='${o.name}' />
			 	
			 	${s.count},id: ${o.id} , name: ${o.name} ,createDate:
					${o.createDate}</li>
			</c:forEach>
		</ul>
		<app:Page id="page1" pg="${page}" pageCallback="goPage" />
	</aa:zone>
	<hr />

	



	<script type="text/javascript">
	$('#btQuery').click(function() {
		listPage(1)
	});

	function goPage(n) {
		listPage(n)
	}
	
	function listPage(pageNo){
		//ajaxAnywhere.getAJAX('/j/list?pageSize=2&pageNo='+pageNo, 'zoneJ');
		
		//ajaxAnywhere.submitAJAX('/j/list?pageSize=2&pageNo='+pageNo, 'zoneJ');
		
		
		ajaxAnywhere.formName="from1";
		ajaxAnywhere.submitAJAX();
		<!-- 所要刷新的区域 -->
		ajaxAnywhere.getZonesToReload = function(){
				return "zoneJ";
		}
		
		/*
		ajaxAnywhere1=new AjaxAnywhere()
		ajaxAnywhere1.bindById();
		ajaxAnywhere.formName="from1";
		ajaxAnywhere.submitAJAX();
		<!-- 所要刷新的区域 -->
		ajaxAnywhere.getZonesToReload = function(){
				return "zoneJ";
		}
		*/
		
	}
	
	
	$('#btSave').click(function() {
		// 1. 获取数据
		let vo=getVo()
		//let vo=this.vo
		// 2.提交数据
		$http.post('/save/demo',vo).then(res=>{
			console.log(res)
		})
	});
	
	function getVo(){
		let vo={}
		vo.id=$('#id').val()
		vo.name=$('#name').val()
		console.log(vo)
		return vo
	}
	
	
	$('#btDelete').click(function() {
		// 1. 获取数据
		//let data=['1','2','3']
		let data=getDeleteData()
		//let vo=this.vo
		// 2.提交数据
		$http.post('/demo/deleteByIds',data).then(res=>{
			console.log(res)
		})
	});
	$('#btSaveBatch').click(function() {
		// 1. 获取数据
		/* let data=[
			 {id:'id1',name:'name1'},
			 {id:'id2',name:'name2'},
		
		] */
		
		let data=getSaveBatchData()
		
		//let vo=this.vo
		// 2.提交数据
		$http.post('/demo/saveBatch',data).then(res=>{
			console.log(res)
		})
	});
	$('#btSaveDto').click(function() {
		// 1. 获取数据
		/*
		let data={
				  id:'id1',
				  name:'name1',
				  
				  list:[{id:'id1',name:'name1'},{id:'id1',name:'name1'}],
				  
				  vo1:{id:'id1',name:'name1'}
				  
				}
		*/
		
		let data=getSaveDtoData()
		
		
		
		//let vo=this.vo
		// 2.提交数据
		$http.post('/demo/saveDto',data).then(res=>{
			console.log(res)
		})
	});
	
	
	function getDeleteData(){
		let arr=[]
		$('.ck_id').each((i,e)=>{
			if(e.checked){
				arr.push(e.value)
			}
		})
		
		console.log(arr)
		return arr
	}
	
	function getSaveBatchData(){
		let arr=[]
		$('.li_list').each((i,e)=>{
			console.log(e)
			//let tempId=e.id
			//let vo={
			//	id: $('#id_'+id).val(),
			//	name: $('#name_'+id).val()
			//}
			//let vo={...e.dataset}
			//delete vo.addr
			
			//let {id,name}=e.dataset
			
		    //let vo={id,name}
			
			let {addr,...vo}=e.dataset
			
			//console.log( e.dataset)
			
			arr.push(vo)
				
		})
		
		console.log(arr)
		return arr
	}
	
	function getSaveDtoData(){
		let vo={}
		vo.id=$('#id').val()
		vo.name=$('#name').val()
		let list=[]
		vo.list=list
		
		
		$('.li_list').each((i,e)=>{
			let {addr,...vo}=e.dataset
			list.push(vo)
		})
		
		vo.vo1={
			id:$('#id').val(),
			name: $('#name').val()
		}
		
		console.log(vo)
		return vo
	}
	
	
</script>
	<script src="/resources/js/http.js"></script>
	<script src="/resources/js/vue.global.prod.js"></script>
	<script src="/resources/js/bootstrap.bundle.min.js"></script>
	<script src="/resources/js/feather.min.js"></script>
</body>
</html>
